<template>
  <el-form
    ref="formRef"
    :model="baseInfo"
    :rules="rules"
    :label-width="140"
    :inline="true"
    size="small"
  >
    <el-row :gutter="40">
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="配送商编号："
          prop="distributeNo"
        >
          <span>{{ baseInfo.distributeNo }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="配送商名称："
          prop="distributeName"
        >
          <span>{{ baseInfo.distributeName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="统一社会信用代码："
          prop="creditCode"
        >
          <span>{{ baseInfo.creditCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="企业所在地区："
          prop="area"
        >
          <span v-if="baseInfo.provinceName">{{ baseInfo.provinceName }} / </span>
          <span v-if="baseInfo.cityName">{{ baseInfo.cityName }} / </span>
          <span v-if="baseInfo.areaName">{{ baseInfo.areaName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="联系人："
          prop="contactsName"
        >
          <span>{{ baseInfo.contactsName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="联系人电话："
          prop="contactsPhone"
        >
          <span>{{ baseInfo.contactsPhone }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="详细地址："
          prop="address"
        >
          <span>{{ baseInfo.address }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          style="width: 100%;"
          label="负责职员："
        >
          <span>{{ baseInfo.userName }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {defineComponent, onMounted, reactive, ref, toRefs, watch} from 'vue'
import area from '@/utils/area.js'
import {crmStore} from '@CRM/store'
import {useRoute} from 'vue-router'

export default defineComponent({
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  emits: ['baseInfo'],
  setup(props, context) {
    const route = useRoute()
    const citys = area
    const formRef = ref(null)
    const cascader = ref(null)
    var userInfo = crmStore.getters['user/userInfo']
    var formData = reactive({
      userInfo: userInfo,
      baseInfo: {
        agentId: route.query.agentId ? Number(route.query.agentId) : 0,
        distributeName: '',
        creditCode: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        address: '',
        contactsName: '',
        contactsPhone: '',
        userId: userInfo?.ID || undefined,
        userName: userInfo?.realName || '',
        qualifications: [],
      },
    })
    const baseInfoValidate = (callBack) => {
      formRef.value.validate(callBack)
    }
    onMounted(() => {})

    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          formData.baseInfo = {
            ...newval,
            userId: newval.userId > 0 ? newval.userId : undefined,
            area: [newval.provinceCode, newval.cityCode, newval.areaCode],
          }
        }
      },
      { immediate: true }
    )

    return {
      formRef,
      cascader,
      ...toRefs(formData),
      citys,
      baseInfoValidate,
    }
  },
})
</script>

